<template>
    <div>
      <span @click="handleNavigateTo">navigateTo</span>
      <Auto/>
      <TestAuto />
      <component :is="clickable ? Dynamic : 'div'" />
      <LazyTest v-if="clickable"/>
      <NuxtLink :to="'detail/' + item.id"  v-for="item in  data" :key="item.id">
        <a-card  :title="item.title" style="width: 80vw; margin: 20px auto">
      {{ item.updateAt }}
    </a-card>
      </NuxtLink>
      
    </div>
  </template>
  <script lang="ts" setup>
  import { getSeacrhApi, requestList } from '@/api/api'
  definePageMeta({
    layout: 'content'
  })
  const Dynamic = resolveComponent('dynamic')
  import LazyTest from '@/components/lazy/test.vue'
  //  // lazy - 是否在路由之后才请求数据，server - 是否在服务端请求数据
  const {
  data, // 返回的数据
} = useAsyncData('index', () => requestList(),  { lazy: false, server: true })
const clickable = ref(false)
onMounted(() => {
  clickable.value = true
})
const handleNavigateTo = () => {
  navigateTo({
    path: '/staticPage'
  })
}
  </script>